// 页面路由
window.location.href = 'http://www.baidu.com'
history.back();

// hash 路由
window.location = '#hash'
window.onhashchange = function(){
    console.log('current hash: ', window.location.hash)
}

// h5 路由
// 推进一个状态
history.pushState('name', 'title', '/path')
// 替换一个状态
history.replaceState('name', 'title', '/path')
// popstate
window.onpopstate = function(e){
    console.log(window.location.href)
    console.log(window.location.pathname)
    console.log(window.location.hash)
    console.log(window.location.search)
}


// react-router
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom'

class A extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div>
        <h1>Component A</h1>
        <Switch>
          <Route exact path={`${this.props.match.path}`} 
            render={(route) => {
              return <p>当前组件是不带参数的A</p>
            }}
          />
          <Route path={`${this.props.match.path}/sub`} 
            render={(route) => {
             return <p>当前组件sub子路径</p>
            }}/>
          {/* 通配的放在最后 */}
          <Route path={`${this.props.match.path}/:id`} 
            render={(route) => {
             return <p>当前组件是带参数的A，参数是{route.match.params.id}</p>
            }}/>
        </Switch>
      </div>
    );
  }
}

class B extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <h1>Component B</h1>
    );
  }
}

class Wrapper extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div>
        <Link to="/a">组件A</Link>
        <br />
        <Link to="/a/123">带参数组件A</Link>
        <br />
        <Link to="/a/sub">/a/sub</Link>
        <br />
        <Link to="/b">组件B</Link>
        {this.props.children}
      </div>
    );
  }
}

ReactDOM.render(
  <Router>
    <Wrapper>
      <Route path="/a" component={A} />
      <Route path="/b" component={B} />
    </Wrapper>
  </Router>,
  document.getElementById('app')
);